<template>
  <div class="home">
    <div class="aaasd">
      <div style="width: 80px">
        <!-- 左侧根分类 -->
        <van-sidebar v-model="activeKey" style="position: fixed">
          <van-sidebar-item
            v-for="(item, index) in rootList"
            :key="item.id"
            :title="item.name"
            @click="selectRootCategory(item.id, index)"
          />
        </van-sidebar>
      </div>
      <!-- 右侧子分类 -->
      <!-- <
        <van-grid-item v-for="item in currentSubList" :key="item.id">
          <router-link :to="{name:'categorylist',query:{id:item.id}}">
            <div class="images">
            <img :src="item.img" class="imgs">
          </div>
          </router-link>
          <div>{{item.name}}</div>
        </van-grid-item>
      </van-grid> -->
<!-- ${Math.ceil(arrsubs[item2.id].lenght/3)*150} -->
      <div class="sdasd">
        <div
          v-for="(item2, index2) in rootList"
          :key="index2"
          class="aaa"
          :id="'a' + item2.id"
          :style="`height:${Math.ceil(arrsubs[item2.id].length/3)*160}px`"
        >
          <van-grid class="grid" :column-num="3" :border="false">
            <van-grid-item
              v-for="(item, index) in arrsubs[item2.id]"
              :key="index"
            >
              <router-link
                :to="{ name: 'categorylist', query: { id: item.id } }"
              >
                <div class="images">
                  <img :src="item.img" class="imgs" />
                </div>
              </router-link>
              <div>{{ item.name }}</div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
    <NavBarVue></NavBarVue>
  </div>
</template>

<script>
import NavBarVue from "@/components/NavBar.vue";

export default {
  name: "Category",
  data() {
    return {

      rootList: [], //左侧根分类
      allSubList: [], //所有子分类
      currentSubList: [], //左侧选中的根分类的子分类
      activeKey: 0,
      arrsubs: {},
    };
  },
  created() {
    this.getAllCategory();
  },
  methods: {
    getAllCategory() {
      this.$http.get("http://localhost:8080/category/all").then((res) => {
        let itm = res.data;
        this.rootList = itm.roots;
        this.allSubList = itm.subs;

        // 第一次进入页面时，显示左侧根分类的第一个

        itm.subs.forEach((item, index) => {
          if (this.arrsubs[item.parentId + ""]) {
            this.arrsubs[item.parentId + ""].push(item);
          } else {
            this.arrsubs[item.parentId + ""] = [];
            this.arrsubs[item.parentId + ""].push(item);
          }
        });
      });
    },
    // 根据rootList获取currentSubList
    selectRootCategory(rootId, index) {
      console.log(document.documentElement.scrollTop);
      document.documentElement.scrollTop=300*index ;
      // const dom = document.querySelector(".sdasd");
      // dom.style.top = 300 * index * -1 + "px";
    },
    // 根据rootList获取currentSubList
    yyx(rootId) {
      var aa = this.allSubList.filter((item) => {
        return item.parentId === rootId;
      });
      return aa;
    },
  },
  mounted() {
    console.log(document.getElementById("a0"));
  },
  watch:{
    "document.documentElement.scrollTop"(){
      console.log(document.documentElement.scrollTop);
    }
  },
  components: {
    NavBarVue,
  },
};
</script>

<style scoped>
.aaa {
  /* height: 300px; */
  width: calc(100% - 80px);
  border: 1px rgba(184, 184, 184, 0.63) solid;
  margin: 0 auto;
  padding: 0;
}
.sdasd {
  position: absolute;
  left: 80px;
  padding-bottom: 50px;
  overflow: hidden;
}
.aaasd {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
}
.images {
  height: 60px;
}
.images img {
  max-width: 60px;
  max-height: 50px;
}
a {
  text-decoration: none;
  color: black;
}
.grid {
  padding-top: 13px;
  margin: 5px 5px;
  height: 140px;
}
</style>
